<template>
  <div>
    <UserDataBox
      v-for="(data, username) in userData"
      :key="username"
      :username="username"
      :data="data"
    />
    <!-- <SkeletonViewer /> -->
  </div>
</template>

<script>
import { io } from "socket.io-client";
import UserDataBox from "@/views/UserDataBox.vue"; // 导入 UserDataBox 组件
import SkeletonViewer from "@/components/SkeletonViewer.vue"; // 导入 SkeletonViewer 组件

export default {
  components: {
    UserDataBox, // 注册组件
    SkeletonViewer // 注册组件
  },
  data() {
    return {
      userData: {}, // 存储不同用户的数据
      socket: null,
    };
  },
  mounted() {
    this.socket = io("http://127.0.0.1:5000"); // 你的 Flask 后端地址

    this.socket.on("connect", () => {
      this.socket.emit("join", { room: "wit_data_room" }); // 加入房间
    });

    this.socket.on("response_to_vue", (data) => {
      const { username, data: userData } = data;
      this.$nextTick(() => {
        this.userData = {
          ...this.userData,
          [username]: userData,
        };
      });
    });

    this.socket.on("leftInsole_data_event", (data) => {
      const { username, data: leftData } = data;
      if (!this.userData[username]) {
        this.userData[username] = {};
      }
      this.userData[username].leftInsole = leftData;
    });

    this.socket.on("rightInsole_data_event", (data) => {
      const { username, data: rightData } = data;
      if (!this.userData[username]) {
        this.userData[username] = {};
      }
      this.userData[username].rightInsole = rightData;
    });
  },
  beforeDestroy() {
    if (this.socket) {
      this.socket.disconnect();
    }
  }
};
</script>

<style scoped>
.user-data-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 可选：居中对齐 */
}
</style>
